<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import { useRouter } from 'vue-router';
const props = defineProps(['chapter', 'title'])
const router = useRouter();
const emit = defineEmits(['goNewChapter','changeTarget']);
const goChapter = (sortNo: any, storyId: any) => {
    //sortNo是第几章,页面获取的target是下标
    router.replace({
        path: "/reading",
        query: {
            id: storyId,
            target: sortNo - 1
        }
    })
    emit("goNewChapter")
    emit("changeTarget",sortNo - 1)

}
</script>
<template>
    <div class="leftTop">
        <svg t="1698903842928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5994" width="200" height="200">
            <path
                d="M86.8 72.8c14.9 0 27 12.1 27 27s-12.1 27-27 27-27-12.1-27-27 12.1-27 27-27M946.2 117.8H243c-9.9 0-18-8.1-18-18s8.1-18 18-18h703.2c9.9 0 18 8.1 18 18s-8.1 18-18 18zM86.8 485c14.9 0 27 12.1 27 27s-12.1 27-27 27-27-12.1-27-27c0-15 12.1-27 27-27M946.2 525.5H243c-9.9 0-18-8.1-18-18s8.1-18 18-18h703.2c9.9 0 18 8.1 18 18s-8.1 18-18 18zM86.8 897.2c14.9 0 27 12.1 27 27s-12.1 27-27 27-27-12.1-27-27c0-15 12.1-27 27-27M946.2 942.2H243c-9.9 0-18-8.1-18-18s8.1-18 18-18h703.2c9.9 0 18 8.1 18 18s-8.1 18-18 18z"
                fill="#d81e06" p-id="5995"></path>
        </svg>
    </div>
    <div class="leftContent">
        <div class="name">正文卷</div>
        <div class="chapterBox">
            <ul>
                <li v-for="item in chapter" :key="item.id" @click="goChapter(item.sortNo, item.storyId)">
                    <div class="chapterTitle" :class="title === item.name ? 'active' : ''">{{ item.name }}</div>
                    <div class="isPay">{{ item.isPay === 0 ? '免费' : '需要付费' }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped lang='less'>
.leftTop {
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    padding: 4vw 0;
    position: sticky;
    top: 0;
    left: 0;

    svg {
        width: 8vw;
        height: 8vw;
        display: block;
    }
}

.leftContent {
    // padding-left: 10vw;
    padding: 0 5vw;
    box-sizing: border-box;


    .chapterBox {
        width: 60vw;
        height: 100%;
        overflow: hidden;
    }

    ul {
        overflow: scroll;
        height: 87vh;
        width: 100%;

        &::-webkit-scrollbar {
            display: none;
        }

        li {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            padding: 2vw 0;
            border-top: 1px solid #eeeeee;

            .chapterTitle {
                width: 60%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .isPay {
                color: #dec884;
            }

            .active {
                color: #da6974;
            }
        }
    }
}
</style>